/**
 * 我的排班
 * @author truexin
 * @date   16/08/18
 */
import PullRefresh from '../components/mui/PullRefresh.js';

(function (lf, r) {
    
    let ajax = lf.utils.ajax;
    
    var Body = r.createClass({
        render: function () {
            let me = this,
                user = me.props.user,
                name = user.name,
                menu = me.props.monthList,
                list = me.props.scheduleNameList.map(function (info, i) {
                    
                    let
                        startArr = info.workStarttime.split(':'),
                        startArr1 = info.workEndtime.split(':'),
                        endArr = info.leaveStarttime.split(':'),
                        endArr1 = info.leaveEndtime.split(':'),
                        start = startArr[0] + ':' + startArr[1],
                        start1 = startArr1[0] + ':' + startArr1[1],
                        end = endArr[0] + ':' + endArr[1],
                        end1 = endArr1[0] + ':' + endArr1[1];

                    for (let j = 0; j < menu.length; j++) {
                        if (menu[j].name == info.name) {
                            return (
                                <div className='color-panel flex-item'>
                                    <span className={"inline-block " + 'color' + i}></span>
                                    <span className="plan text-dot">{info.name}</span>
                                    <p>{ start + '-' + end +' / '+start1 + '-' + end1}</p>
                                </div>
                            )
                        }
                    }
                });
            return (
                <div>
                    {
                        me.props.type ? <div className="staff-name">{name}</div> : ''
                    }
                    <div id="calendar"></div>
                    <div className="intro flex">
                        {list}
                        <div className='color-panel flex-item default'>
                            <span className={"inline-block " + 'color' + '00'}></span>
                            <span className="plan text-dot">休息</span>
                        </div>
                    
                    </div>
                </div>
            );
        }
    });
    
    var Root = r.createClass({
        getInitialState() {
            return ({
                monthList: [],//获取有数据的日子
                type: false, //用于用户名称显示
                scheduleNameList: [],//页面底部-排班定义列表
            })
        },
        componentWillMount() {
            let me = this;
            ajax({
                type: "get",
            }, lf.api.attendance.defineList, (data) => {//获取页面底部-排班定义列表
                me.setState({
                    scheduleNameList: data,
                })
            })
        },
        componentDidMount() {
            this.renderCalendar();
        },
        renderCalendar() {
            let me = this,
                user = me.props.user;
            
            $('#calendar').fullCalendar({ //这里开始绘画 日历,才能查询其中元素
                header: {
                    left: '',
                    center: 'prev,title,next',
                    right: '',
                },
                firstDay: 0, //设定每周从周日开始
                lang: 'zh-cn',
                monthNames: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],//定义月份显示文字
                dayNamesShort: ["日", "一", "二", "三", "四", "五", "六"],//定义星期显示文字
                viewRender: function (view) { //viewDisplay is already deprecated... //当前月或者切换月份重新渲染事件
                    
                    let arr = view.title.split(' '),
                        y = arr[0].split('年'),
                        m = arr[1].split('月');
                    
                    let month = y[0] + '-' + m[0] + '-01';
                    
                    ajax({
                        type: "get",
                        data: {
                            staffId: user.id,
                            month: month,  //查询月份【如果是2016年08月，则传2016-08-01】
                        },
                    }, lf.api.attendance.planList4Month, (data) => { //1.planList4Month(按月查询) 2.planList(按周查询)
                        
                        let monthList = [];
                        
                        data.map(function (d) {
                            
                            let event = {
                                title: '',
                                start: d.schedulingDate,
                                name: d.schedulingName,
                            }
                            monthList.push(event);
                        })
                        
                        me.setState({
                            monthList: monthList,
                            type: true,
                        })
                        
                        me.renderStyle();
                        
                        $('.fc-button').bind('click', me.renderStyle);
                    })
                },
            });
        },
        renderStyle() { //渲染每天样式
            
            let me = this;
            
            $('.fc-button').off();//取消默认事件click
            
            $('.fc-prev-button').on('tap', ()=> { //自定义事件tap,不过要引人mui,不引人可以考虑touchend/touchstart
                $('#calendar').fullCalendar('prev');//切换到上一个月的视图
            });
            
            $('.fc-next-button').on('tap', ()=> {
                $('#calendar').fullCalendar('next');
            });
            
            //获取当前月份所有天
            $('.fc-body').find('.fc-bg').find("td:not('.fc-other-month')")
            .each(function (i, td) {
                
                let $me = $(this),
                    list = me.state.monthList,
                    span = document.createElement('span'),
                    scheduleNameList = me.state.scheduleNameList,
                    date = $me.data('date');
                
                td.style.cssText = 'position:relative;';
                
                span.className = 'inline-block relax';
                
                list.map(e => {
                    if (e.start == date) {
                        scheduleNameList.map((name, i)=> {
                            if (e.name == name.name) {
                                span.className = 'inline-block ' + 'color' + i;
                            }
                        })
                    }
                })
                td.appendChild(span);
            });
        },
        render: function () {
            return <div className="calendar-cover">
                <Body user={this.props.user} type={this.state.type}
                      monthList={this.state.monthList}
                      scheduleNameList={this.state.scheduleNameList}/>
            </div>
        }
    });
    
    lf.appJs.getUser(function (user) {
        r.render(
            <PullRefresh data={<Root user={user}/>}/>,
            document.getElementById('root'), function () {
                $('#root').css({backgroundColor: '#f2f2f2'});
                $('.mui-scroll').css({backgroundColor: '#f2f2f2'});
            }
        )
    });
})(liefeng, React)
